Day-24 ASP.NET MVC 之 Json 讀取顯示資料

2023 iThome 鐵人賽

DAY 24

Software Development

ASP.NET MVC基礎修練：從菜開始系列第 24 篇

15th鐵人賽

Nash

2023-10-09 23:54:46

568 瀏覽

分享至

在 BLL 的 UsersManager.cs
加一段程式如下

public List<Users> UsersInfo(string UserName)
        {
            return new UsersService().UsersInfo(UserName);
        }

DAL 的 UsersService.cs
加一段程式如下

  public List<Users> UsersInfo(string UserName)
        {
            string sql = " select * from users ";
            
            sql += " where UserName like '%{0}%'";
            sql = string.Format(sql, UserName);
            SqlDataReader objReader = SQLHelper.GetReader(sql);
            List<Users> list = new List<Users>();
            while (objReader.Read())
            {
                list.Add(new Users()
                {
                    LoginId  = objReader["LoginId"].ToString(),
                    Pwd = objReader["Pwd"].ToString(),
                    UserName = objReader["UserName"].ToString()
                });
            }
            objReader.Close();
            return list;
        }

在 Scripts 的資料夾下加一個檔案 jquery-1.7.1.min.js
在 UsersController.cs 加上下列程式

 public ActionResult GetList(string UserName)
        {
            List<Users> UsersList = new UsersManager().UsersInfo(UserName);
            JavaScriptSerializer jss = new JavaScriptSerializer();
            string stringList = jss.Serialize(UsersList);
            return Json(stringList, JsonRequestBehavior.AllowGet);
        }

     
        [ActionName("GetAllList")]
        public ActionResult GetList()
        {
            ViewBag.UsersList = new UsersManager().UsersInfo("");
            return View("UsersManager");
        }
       
        public ActionResult list()
        {
            return View();
   }

GetList(string UserName) 程式主要說明：
public ActionResult GetList(string UserName)：這是一個公開的動作方法，可以透過 HTTP 請求來存取。它接受一個名為 UserName 的字串參數。

List UsersList = new UsersManager().UsersInfo(UserName);：
透過 UsersManager 類別的 UsersInfo 方法，取得了一個 Users 型別的清單，
這個清單可能包含符合特定使用者名稱的使用者資訊。

JavaScriptSerializer jss = new JavaScriptSerializer();：JavaScriptSerializer
是用來將物件序列化為 JSON 字串，或將 JSON 字串反序列化為物件的類別。建立了一個 JavaScriptSerializer 的實例。

string stringList = jss.Serialize(UsersList);：
透過 JavaScriptSerializer，我們將 UsersList 清單物件序列化成 JSON 字串。這個 JSON 字串包含了使用者資訊的集合。

return Json(stringList, JsonRequestBehavior.AllowGet);：透過 Json 方法，將 JSON 字串包裝成一個 JsonResult，並回傳給客戶端。
JsonResult 代表包含 JSON 資料的 HTTP 回應。JsonRequestBehavior.AllowGet 表示允許客戶端使用 GET 請求取得 JSON 資料。

UsersController.cs 的 list Views
在 Views 資料夾下加一個 list.cshtml
關鍵程式碼如下

  <script src="~/Scripts/jquery-1.7.1.min.js"></script>

    <script type="text/javascript">
        $(function () {

            $("#submitQuery").click(function () {
         
                $("#userTable tbody").empty();
                var cName = $("#UserName").val();
                $.post("/Users/GetList", { "UserName": cName }, function (data, status) {
                    var list = $.parseJSON(data);
                    for (var i = 0; i < list.length; i++) {
                        var row = "<tr>" +
                            "<td>" + list[i].LoginId + "</td>" +
                            "<td>" + list[i].UserName + "</td>" +
                            "</tr>";
                        $("#userTable tbody").append(row);
                    }
                });
            });
        });
    </script>

<body>
    <div id="container">
      
        <div id="querydiv">
            <div id="formdiv">
              
                <input type="button" id="submitQuery" value="查詢" />
            </div>
        </div>
      
        <table id="userTable"  class="bordered-table" >
            <thead>
                <tr>
                    <td><span class="blue-text">帳號</span></td>
                    <td><span class="blue-text">姓名</span></td>
                </tr>
            </thead>
        
        </table>
    </div>
</body>

jQuery 程式說明如下
$(function () { ... });：這是一個 jQuery 語法，代表當網頁（HTML 文件）載入完成後，執行其中的程式碼。這確保了在 DOM 元素都載入後再執行 JavaScript，以確保 JavaScript 可以操作 HTML 元素。

$("#submitQuery").click(function () { ... });：這一行代表選取 id 為 "submitQuery" 的 HTML 元素然後綁定了一個 click 事件處理函式。當該按鈕被點擊時，這個函式會被執行。

$("#userTable tbody").empty();：這一行用於清空 HTML 表格（通常是）中元素的內容。這樣可以確保每次重新查詢時，表格中不會保留之前的資料。

var cName = $("#UserName").val();：這一行用於取得 id 為 "UserName" 的輸入框中的值，並存儲在變數 cName 中。

$.post("/Users/GetList", { "UserName": cName }, function (data, status) { ... });：這是一個使用 jQuery 的 AJAX POST 請求。
它向位於 "/Users/GetList"
這個 URL 的伺服器端控制器發送了一個 POST 請求，
並帶有一個 JSON 物件 { "UserName": cName } 作為請求的資料。
當伺服器回應時，會執行後面的函式，其中 data 參數包含伺服器回傳的 JSON 資料，status 參數包含請求的狀態。

var list = $.parseJSON(data);：
這一行用於將 JSON 格式的資料（在 data 中）解析成 JavaScript 物件，並存儲在變數 list 中。

$("#userTable tbody").append(row);：這一行用於將建立的 HTML 行（row 變數）附加到表格的元素中，以顯示在網頁上。

執行畫面如下